<template>
	<div class="container">
		<!-- 顶部轮播图 -->
		<div class="swiper-container">
			<swiper :autoplay="true" :interval="3000" :circular="true">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.image" @click="clickImage(index,item.image)" class="swiper-image" />
				</swiper-item>
			</swiper>
		</div>


		<!-- 中间四个选项 -->
		<div class="menu-container">
			<div v-for="(item, index) in recommendLists" :key="index" class="menu-item"
				:class="{ active: currentRecommendIndex === index }" @click="changeRecommend(index,item.products)">
				<div class="menu-name">{{ item.name }}</div>
				<div class="menu-discount">{{ item.discount }}</div>
			</div>
		</div>

		<!-- 内容区域 -->
		<div class="content-container">

			<div class="content-section">
				<!-- <div class="section-title">热门推荐 <span class="sub-title">低至4折</span></div> -->
				<div class="brand-list">
					<div class="brand-item" v-for="(brand, index) in currentProductionList" :key="index">
						<image :src="brand.image"  class="brand-image" @click="clickImage(index,brand.image)" />
						<div class="brand-name">{{ brand.name }}</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentMenu: 0, // 当前选中的菜单项
				swiperList: [{
						image: 'https://www.xiaokunkeji.cn/user/static/img/banner.bcee69a.png'
					},
					{
						image: 'https://www.xiaokunkeji.cn/user/static/img/banner.bcee69a.png'
					},
					{
						image: 'https://www.xiaokunkeji.cn/user/static/img/banner.bcee69a.png'
					}
				],
				currentProductionList: [],
				currentRecommendIndex: 0,
				recommendLists: [{
						name: "热门推荐",
						discount: "低至四折",
						type: null,
						products: [{
								name: "腾讯视频",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/acd21186bc314315bbea5a51fdc7191f.png",
								url: "",
							},
							{
								name: "爱奇艺",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/359142387bed40f9a950c9ef36697c47.png",
								url: "",
							},
							{
								name: "优酷视频",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/1a263f6c212b4a84b881fd7937a44450.png",
								url: "",
							},
							{
								name: "芒果TV",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/44e9e56e52374a4ca131bb8930461cc7.png",
								url: "",
							},
							{
								name: "网易云音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/68b21810f78c4ae49a21774831b06929.png",
								url: "",
							},
							{
								name: "酷狗音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/c82458a86da8412b85c5603206cd042c.png",
								url: "",
							},
							{
								name: "QQ音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/1f900fa6bd004e21bf1411b925b6c1d3.png",
								url: "",
							},
							{
								name: "瑞幸咖啡",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/93ef53c65e5946958597198820fbd283.png",
								url: "",
							},
							{
								name: "星巴克",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/865ba7bbc97e4ad1910982af6eb3a681.png",
								url: "",
							},
							{
								name: "KFC",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/95b3671326f04b218fd825a91952980a.png",
								url: "",
							}

						]
					},
					{
						name: "视听娱乐",
						discount: "会员四折",
						type: null,
						products: [{
								name: "腾讯视频",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/acd21186bc314315bbea5a51fdc7191f.png",
								url: "",
							},
							{
								name: "爱奇艺",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/359142387bed40f9a950c9ef36697c47.png",
								url: "",
							},
							{
								name: "优酷视频",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/1a263f6c212b4a84b881fd7937a44450.png",
								url: "",
							},
							{
								name: "芒果TV",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/44e9e56e52374a4ca131bb8930461cc7.png",
								url: "",
							},
							{
								name: "网易云音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/68b21810f78c4ae49a21774831b06929.png",
								url: "",
							},
							{
								name: "酷狗音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/c82458a86da8412b85c5603206cd042c.png",
								url: "",
							},
							{
								name: "QQ音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/1f900fa6bd004e21bf1411b925b6c1d3.png",
								url: "",
							},
							{
								name: "酷我音乐",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/d8fb7e95d5194238abb4829623de359c.png",
								url: "",
							},
							{
								name: "懒人听书",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/1ccfd5bab08a46c3a30981a9f7d7d625.png",
								url: "",
							},


						]
					},
					{
						name: "咖啡饮品",
						discount: "饮品6折起",
						type: null,
						products: [{
								name: "瑞幸咖啡",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/93ef53c65e5946958597198820fbd283.png",
								url: "",
							},
							{
								name: "星巴克",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/865ba7bbc97e4ad1910982af6eb3a681.png",
								url: "",
							},
							{
								name: "喜茶",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/9d73d2a29d6c44f3ab7f675c3d80f64f.png",
								url: "",
							},
							{
								name: "奈雪の茶",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/964b508f90774c8b99733d68ac0f8742.png",
								url: "",
							},
							{
								name: "CoCo都可",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/c89914d7e48d4096b8c1abf5e307cfe6.png",
								url: "",
							},
							{
								name: "书亦烧仙草",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/0570e8e99cc84566a1485b523e1bf428.png",
								url: "",
							},
							{
								name: "蜜雪冰城",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/2a9aa8752f444565bff3d924090b0efe.png",
								url: "",
							},
							{
								name: "茶百道",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/eb4b53b9b01349c19c9ed27cb51afbea.png",
								url: "",
							},
							{
								name: "古茗",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/3363f6b3ad0a426bb1a943cbed8fbec3.png",
								url: "",
							},
							{
								name: "COSTA咖啡",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/fdfbcf792215449ebfd8c15f60044ab4.png",
								url: "",
							},

						]
					},
					{
						name: "美食甜品",
						discount: "美食6折起",
						type: null,
						products: [{
								name: "KFC",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/95b3671326f04b218fd825a91952980a.png",
								url: "",
							},
							{
								name: "麦当劳",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/8891b81aa4c841eea7510b2f0230dd2d.png",
								url: "",
							},
							{
								name: "汉堡王",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/a07bc001bf5e4d32b9c0de2923751d4c.png",
								url: "",
							},
							{
								name: "必胜客",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/230749c2a30f40d5b4db346a8d31406a.png",
								url: "",
							},
							{
								name: "德克士",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/14a0afbc96764c6b8d04bc6d40169d52.png",
								url: "",
							},
							{
								name: "满记甜品",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/fb777b0f01c84ea18012805a9e020f88.png",
								url: "",
							},
							{
								name: "幸福西饼",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/7e75d8c418ad46f5af762d6d4a1905e4.png",
								url: "",
							},
							// {
							// 	name: "巴黎贝甜",
							// 	image: "https://res.xiaokunkeji.cn/image/2022/10/15/b3a3ad650cfb4b81b2fbe82079e86ac2.png",
							// 	url: "",
							// },
							{
								name: "哈根达斯",
								image: "https://res.xiaokunkeji.cn/image/2022/10/15/6c49b4494eab46d18764c29a63c32b75.png",
								url: "",
							},


						]
					},
				],

			}
		},
		onLoad() {
			this.currentProductionList=this.recommendLists[0].products;
			 // this.$set(this, 'currentProductionList', this.recommendLists[0].products);
		},
		methods: {
			changeRecommend(index, products) {
				// this.$set(this, 'currentRecommendIndex', index);
				// this.$set(this, 'currentProductionList', products);
				this.currentRecommendIndex = index;
				this.currentProductionList = products;
			},
			getinit(){
				 setTimeout(() => {
				        console.log('1秒后执行的操作');
				      }, 1000); // 1000毫秒 = 1秒
			},
			changeMenu(index) {
				this.currentMenu = index;
			},
			clickImage(index, url) {
				console.log("点击的图片的顺序", index, "；图片地址：", url)
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 10px;
		background-color: #f8f8f8;
	}

	/* 轮播图样式 */
	.swiper-container {
		height: 150px;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	/* 菜单样式 */
	.menu-container {
		display: flex;
		justify-content: space-around;
		margin-bottom: 15px;
		background-color: #fff;
		padding: 10px 0;
		border-radius: 8px;
	}

	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px 10px;
		border-radius: 15px;
	}

	.menu-item.active {
		background-color: #f5cda9;
		color: white;
	}

	.menu-name {
		font-size: 18px;
		color: #010c22;
		font-weight: 600;
	}

	.menu-discount {
		font-size: 12px;
		color: #cbcbcb;
	}

	/* 内容区域样式 */
	.content-container {
		background-color: #fff;
		border-radius: 8px;
		padding: 10px;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.sub-title {
		color: #ff4d4f;
		font-size: 12px;
		margin-left: 5px;
	}

	/* 品牌列表样式 */
	.brand-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.brand-item{
		width: 19%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 1rpx;
		margin-bottom: 10px;
	}

	.brand-image {
		height: 65rpx;
		width: 65rpx;
	}

	.brand-logo,
	.drink-logo,
	.food-logo {
		width: 40px;
		height: 40px;
		background-color: #f0f0f0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 5px;
		font-weight: bold;
	}

	.brand-name,
	.drink-name,
	.food-name {
		font-size: 12px;
		text-align: center;
	}

	/* 娱乐列表样式 */
	.entertainment-list {
		display: flex;
		flex-wrap: wrap;
	}

	.entertainment-item {
		width: 30%;
		background-color: #f0f0f0;
		padding: 10px;
		margin: 5px;
		border-radius: 5px;
		text-align: center;
	}
</style>